<template>
  <a-layout class="layout">

    <a-layout-header class="searchHeader" style=" background-color: rgb(39, 100, 173);width: 100%; height: 60px">

      <SearchHeader :title='pageTitle' />

    </a-layout-header>
    <a-layout-content :style="{ background: '#fff', minHeight: '680px' }">

      <div :bordered="false" :style="{ backgroundColor: '#f2f2f2', height: '100%' }">
        <!--<SearchHeader/>-->
        <div :style="{ backgroundColor: '#2764AD', padding: '25px', minWidth: '900px', height: '125px' }">
          <!-- 查询区域 -->
          <div class="table-page-search-wrapper">
            <a-form layout="inline">
              <a-row>
                <a-col :span="24" style="text-align: center;">
                  <div style="display:inline-block">
                    <div style="float: left">
                      <a-input style="width: 800px;" size="large" placeholder="标题、关键字、全文" v-model="content"
                        @pressEnter="pressEnterFun">

                        <a slot="addonAfter" style="color: #303133" @click="searchDocFun('1')">结果中检索</a>
                        <a-icon slot="suffix" @click="searchDocFun('0')" type="search"
                          style="color:#1890FF;fontSize:22px" />
                      </a-input>
                      <div class="checkbox" style="width: 750px;text-align: center;margin-top: 10px;margin-left: 20px">
                        <a-checkbox-group :options="options" v-model="checkboxVuale" @change="onChange" />
                      </div>
                    </div>
                    <div style="float: left;width: 100px;text-align: left;margin-top: -2px">
                      <a @click="advancedSearch" style="color: white;margin-left: 20px;">高级检索&nbsp;&nbsp;&nbsp;></a>
                      <span style="color: white;margin-left: 20px">
                        <span>全文检索</span>
                        <a-checkbox class="checkbox" v-model="boolCheckChange" style="margin-left: 8px"
                          @change="onCheckChange" />
                      </span>
                    </div>
                  </div>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <!-- 查询区域-END -->
        </div>
        <!-- 表格区域 -->
        <div style="background-color:white;margin: 15px;padding: 15px">
          <!-- 操作按钮区域 -->
          <div class="table-operator">
            <!--      <a-button type="primary" icon="download" @click="handleExportXls('草稿文件夹')">导出</a-button>-->
            <a-dropdown v-has="'searchList:batchDownload'" v-if="selectedRowKeys.length > 0">
              <a-menu slot="overlay">
                <a-menu-item key="1" @click="downloadKmDocBatch">
                  <a-icon type="vertical-align-bottom" />
                  批量下载
                </a-menu-item>
              </a-menu>
              <a-button style="margin-left: 8px"> 批量操作
                <a-icon type="down" />
              </a-button>
            </a-dropdown>
          </div>

          <!-- table区域-begin -->
          <div>
            <div class="ant-alert ant-alert-info" style="margin-bottom: 15px;color: #303133;">
              <span v-for="(item, index) in itemList" :key="index">
                <span><b v-if="index == 0">检索范围: </b><span v-if="index == itemList.length - 1">{{ item }}</span> <span
                    v-else>{{ item }}<span style="font-weight: bold;color: red">-></span> </span></span>
              </span>
            </div>

            <!--<div v-else class="ant-alert ant-alert-info" style="margin-bottom: 15px;color: #303133;">-->
            <!--<span v-for="(item,index) in defaultBusinessTypeList" :xl="4" :lg="4" :md="4" :sm="4" :key="index">-->
            <!--<span style="text-align: left;margin-left: 10px">-->
            <!--<span @click="searchBusinessType(item.value)">-->
            <!--<a v-if="item.value === businessTypes" style="color: #303133;font-weight: bold">{{item.text}}</a>-->
            <!--<a v-else style="color: #303133">{{item.text}}</a></span>-->
            <!--</span>-->
            <!--</span>-->
            <!--</div>-->

            <a-table ref="table" size="middle" rowKey="id" :columns="columns" :dataSource="dataSource"
              :pagination="ipagination" :loading="loading"
              :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" @change="handleTableChange">


              // 添加自定义列表插槽
              <div slot="filterDropdown">
                <a-card style="width: 350px">
                  <a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
                    <a-row>
                      <template v-for="(item, index) in defColumns">
                        <template v-if="item.key != 'rowIndex' && item.dataIndex != 'action'">
                          <a-col :span="12">
                            <a-checkbox :value="item.dataIndex">{{ item.title }}</a-checkbox>
                          </a-col>
                        </template>
                      </template>
                    </a-row>
                  </a-checkbox-group>
                </a-card>
              </div>
              <a-icon slot="filterIcon" type='setting' title="自定义列"
                :style="{ fontSize: '18px', color: '#108ee9', minWidth: '35px' }" />

              <span slot="indexNum" slot-scope="text, record,index">
                <p>{{ index + 1 + (ipagination.current - 1) * ipagination.pageSize }}</p>
              </span>
              <span slot="action" slot-scope="text, record">

                <!--<a-icon type="read" title="预览" @click="previewKmDoc(record)"-->
                <!--:style="{ fontSize: '18px', color: '#1890FF', }"/>-->


                <a-icon v-if="record.downloadFlag == 1" type="download" title="下载" @click="downloadKmDoc(record)"
                  :style="{ fontSize: '18px', color: '#1890FF' }" />
                <a-icon v-else type="download" title="禁止下载" :style="{ fontSize: '18px', color: '#909399' }" />

                <a-divider type="vertical" />

                <a-icon v-if="record.favourite == 0" type="star" title="收藏" @click="addFavouriteKmDoc(record)"
                  :style="{ fontSize: '18px', color: '#1890FF', }" />
                <a-icon v-else type="star" theme="filled" title="取消收藏" @click="delFavouriteKmDoc(record)"
                  :style="{ fontSize: '18px', color: '#1890FF', }" />

              </span>

              <span slot="docTitle" slot-scope="text,record">
                <span @click="previewKmDoc(record, true)"><a style="color: #303133">
                    <span v-html="record.title"></span></a></span>
              </span>
              <!--<span slot="test" slot-scope="text, record">-->
              <!--<span v-html="record.title"></span>-->
              <!--</span>-->

            </a-table>
          </div>

          <b-j-modal :title="title" :width="width" :visible="visible" @cancel="handleCancel" cancelText="关闭"
            :okButtonProps="{ class: { 'jee-hidden': true } }">
            <p-d-f-modal :p-d-furl="PDFurl" :iframeWidth="width" />
          </b-j-modal>

        </div>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script>
import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'
import { ACCESS_TOKEN } from "@/store/mutation-types"
import { httpPostAction, getAction, downloadFileName, getActionPDF } from "../../../api/manage";
import { AJeecgListMixin } from '@/mixins/AJeecgListMixin'
import Vue from "vue";
import IframePageContent from "../../../components/layouts/IframeFReportView";
import SearchHeader from '../Common/SearchHeader'

export default {
  name: "docSearch",
  mixins: [AJeecgListMixin],
  components: { IframePageContent, SearchHeader },
  data() {
    return {
      pageTitle: "检索结果",
      boolCheckChange: true,
      knowledgeTitle: "知识专题",
      checkedArray: [],
      topicCodesTree: {
        checked: [],
        halfChecked: [],
      },
      topicCodes: "",
      // businessTypes:"1",
      boolSelect: false,
      treeData: [],
      confirmLoading: false,
      PDFurl: '',
      visible: false,
      pdfLoading: false,
      pdfShow: true,
      isorter: {
        column: '_score',
        order: 'desc',
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      checkboxVuale: [],
      title: "预览",
      width: 900,
      // hotTopicReportList: [],
      defaultBusinessTypeList: [],
      docDataSource: [],
      loadedRatio: 0,
      isSearchResult: false,
      filterOptions: [],
      //要filter的字段
      filterDictCode: 'km_dict_source',
      //表头
      columns: [],
      //列设置
      settingColumns: [],
      //列定义
      defColumns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: "center",
          scopedSlots: { customRender: 'indexNum' }
        },
        {
          title: '标题',
          align: "left",
          dataIndex: 'title',
          scopedSlots: { customRender: 'docTitle' }
        },
        {
          title: '分类',
          align: "left",
          dataIndex: 'category_dictText',
          width: 100,
          filters: [],
          customCell: () => {
            return {
              style: {
                'max-width': '6em',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis'
              },
            };
          },
        },
        {
          title: '标签',
          align: "left",
          dataIndex: 'businessType_dictText',
          customCell: () => {
            return {
              style: {
                'max-width': '6em',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis'
              },
            };
          },
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          fixed: "right",
          width: 80,
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'action'
          }
        },
      ],
      options: [],
      content: '',
      checkedValues: '',
      itemList: [],
      // 要加载多选的字典
      dictCode: 'km_dict_category',

      url: {
        rootList: "/sys/category/loadTreeRoot",
        list: '/KM/kmDoc/searchDoc',
        hotTopicReport: '/KM/kmSearchRecord/hotTopicReport',
        defaultBusinessTypeList: '/KM/HomePage/listBusinessType',
        previewKmDoc: '/KM/kmDoc/previewKmDoc',
        downloadKmDoc: "/KM/kmDoc/downloadKmDoc",
        addFavouriteKmDoc: '/KM/kmDocFavourite/add',
        delFavouriteKmDoc: '/KM/kmDocFavourite/delete',
      }
    }
  },
  created() {
    this.loadTree();
    // 调用初始化自定义table列表函数
    this.initColumns();
    this.initFilterDict();

    //设置全局token
    Vue.prototype.token = Vue.ls.get(ACCESS_TOKEN);
    window._CONFIG['token'] = Vue.prototype.token;
    // this.hotTopicReportFun();
    this.initDict();
    let params = this.$route.params;
    console.log("params：", params);
    this.topicCodes = params.topicCodes;
    this.businessTypes = params.businessTypes;

    // if(this.businessTypes)
    //   this.loadDefaultBusinessTypeFunc()

    if (this.topicCodes == null) {
      if (Object.keys(params).length > 0) {
        this.boolCheckChange = params.boolCheckChange;
        this.content = params.content;
        let replaceTitle = this.content;
        if (replaceTitle)
          replaceTitle = replaceTitle.replace(/，/g, ',');
        // replaceTitle = replaceTitle.replace(/\[/g, '%5B');
        // replaceTitle = replaceTitle.replace(/\]/g, '%5D');
        if (this.boolCheckChange) {
          params["content"] = replaceTitle;
        } else {
          delete params["content"];
          delete params["boolCheckChange"];
        }
        params["title"] = replaceTitle;
        params["keywords"] = replaceTitle;
        params["advSearchFlag"] = 0;

        if (params.category !== "" && params.category != null) {
          this.checkboxVuale = params.category.split(",");
          this.checkedValues = params.category
        }
        this.searchFun(params);
      }
    } else {
      this.topicCodesTree = params.topicCodesTree;
      this.knowledgeTitle = params.knowledgeTitle;
      let param = {};
      param["topicCodes"] = this.topicCodes;
      this.searchFun(param);
    }
  },

  watch: {
    loadedRatio: {
      handler(newVal, oldVal) {
        console.log(newVal)
        if (newVal === 1) {
          this.pdfLoading = false;
        }
      }
    }
  },
  methods: {
    // 加载filter字段选项
    initFilterDict() {
      //优先从缓存中读取字典配置
      // if (getDictItemsFromCache(this.dictCode)) {
      let options = getDictItemsFromCache(this.filterDictCode)
      if (options) {
        options.forEach((item, index) => {
          let filterOption = {};
          filterOption.text = item.title;
          filterOption.value = item.value;
          this.filterOptions.push(filterOption);
        });
        console.log(this.filterOptions);
        this.defColumns[2].filters = this.filterOptions;
        return
      }

      //根据字典Code, 初始化字典数组
      ajaxGetDictItems(this.filterDictCode, null).then((res) => {
        if (res.success) {
          let options = res.result
          console.log(options);
          options.forEach((item, index) => {
            let filterOption = {};
            filterOption.text = item.title;
            filterOption.value = item.value;
            this.filterOptions.push(filterOption);
          });
          this.defColumns[2].filters = this.filterOptions;
        }
      })

    },

    // 是否全文检索
    onCheckChange(e) {
      this.boolCheckChange = e.target.checked
      console.log(`checked = ${e.target.checked}`);
    },

    // 加载树节点，获取树数据
    loadTree() {
      let params = {
        async: false,
        pcode: ""
      };
      getAction(this.url.rootList, params).then(res => {
        if (res.success) {
          if (res.result && res.result.length > 0) {
            this.treeData = res.result
          } else {
            this.treeData = []
          }
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
      })
    },

    // 查找一个节点的所有父节点
    familyTree(treeData, id) {
      var arrTree = [];
      var forFn = function (arr, key) {
        for (var i = 0; i < arr.length; i++) {
          var item = arr[i]
          if (item.key === key) {
            if (item.parentId === "0") {
              break;
            } else {
              console.log("父节点", item.parentId);
              arrTree.push(item.parentId);
              forFn(treeData, item.parentId);
            }
            break
          } else {
            if (item.children != null) {
              forFn(item.children, key);
            }
          }
        }
      }
      forFn(treeData, id);
      return arrTree
    },

    // 树节点选择触发
    onCheck(checkedKeys, checkedNodes) {
      if (checkedKeys.checked.length > 1) {
        let checkKeys = checkedKeys.checked[1];
        checkedKeys.checked = [];
        checkedKeys.checked.push(checkKeys);
        let checkNodesTitle = checkedNodes.checkedNodes[1];
        checkedNodes.checkedNodes = [];
        checkedNodes.checkedNodes.push(checkNodesTitle);
      }
      console.log("checkedKeys", checkedKeys);
      console.log("checkedNodes", checkedNodes);
      let temp = new Array();
      let tempArray = new Array();
      this.checkedArray = checkedKeys.checked;

      for (let i = 0; i < this.checkedArray.length; i++) {
        let arrTemp = this.familyTree(this.treeData, this.checkedArray[i]);
        temp = temp.concat(arrTemp);
      }
      // 数组去重
      tempArray = [...new Set(temp)];
      console.log("tempArray", tempArray);
      checkedKeys.halfChecked = tempArray;
      let checkedTitle = checkedNodes.checkedNodes;
      this.knowledgeTitle = "";
      for (let i = 0; i < checkedTitle.length; i++) {
        if (this.knowledgeTitle === "") {
          this.knowledgeTitle = checkedTitle[i].data.props.title;
        } else {
          if (checkedTitle[i].data.props.data != null) {
            this.knowledgeTitle = this.knowledgeTitle + "," + checkedTitle[i].data.props.title;
          }
        }
      }
      if (this.knowledgeTitle === "") {
        this.knowledgeTitle = "知识专题"
        this.topicCodes = null;
      }
      let param = this.getQueryParams();//查询条件互相影响
      // let param={};
      this.topicCodes = checkedTitle[0].data.props.code;
      param["topicCodes"] = this.topicCodes;
      this.searchFun(param);
      // this.businessTypes=null;

    },
    // 自定义列表  列设置更改事件
    onColSettingsChange(checkedValues) {
      var key = this.$route.name + ":colsettings";
      console.log("colsettings", key);
      Vue.ls.set(key, checkedValues, 30 * 7 * 24 * 60 * 60 * 1000)
      this.settingColumns = checkedValues;
      const cols = this.defColumns.filter(item => {
        if (item.key == 'rowIndex' || item.dataIndex == 'action') {
          return true
        }
        if (this.settingColumns.includes(item.dataIndex)) {
          return true
        }
        return false
      })
      this.columns = cols;
    },
    // 自定义列表  初始化
    initColumns() {
      //权限过滤（列权限控制时打开，修改第二个参数为授权码前缀）
      //this.defColumns = colAuthFilter(this.defColumns,'testdemo:');

      var key = this.$route.name + ":colsettings";
      console.log("colsettings", key);
      let colSettings = Vue.ls.get(key);
      if (colSettings == null || colSettings == undefined) {
        let allSettingColumns = [];
        this.defColumns.forEach(function (item, i, array) {
          allSettingColumns.push(item.dataIndex);
        })
        this.settingColumns = allSettingColumns;
        this.columns = this.defColumns;
      } else {
        this.settingColumns = colSettings;
        const cols = this.defColumns.filter(item => {
          if (item.key == 'rowIndex' || item.dataIndex == 'action') {
            return true;
          }
          if (colSettings.includes(item.dataIndex)) {
            return true;
          }
          return false;
        })
        this.columns = cols;
      }
    },

    searchFun(params) {
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.kmSearchResultVOPage.records;
          this.itemList = res.result.paramPath;
          if (res.result.kmSearchResultVOPage.total) {
            this.ipagination.total = res.result.kmSearchResultVOPage.total;
          } else {
            this.ipagination.total = 0;
          }
        } else {
          this.$message.error("检索失败");
        }
      })
    },

    loadData() {
      this.searchDocFun('2');
    },

    // 加载 分类数据
    initDict() {
      this.options = [];

      //优先从缓存中读取字典配置
      if (getDictItemsFromCache(this.dictCode)) {
        let options = getDictItemsFromCache(this.dictCode)
        options.forEach((item, index) => {
          let person = {};
          person.label = item.title;
          person.value = item.value;
          this.options.push(person);
        });
        return
      }

      //根据字典Code, 初始化字典数组
      ajaxGetDictItems(this.dictCode, null).then((res) => {
        if (res.success) {
          let options = res.result
          options.forEach((item, index) => {
            let person = {};
            person.label = item.title;
            person.value = item.value;
            this.options.push(person);
          });
        }
      })


    },

    // 多选框选择触发
    onChange(checkedValues) {
      this.checkedValues = checkedValues.toString();
      console.log('checked = ', checkedValues);
    },
    // 按回车键触发方法
    pressEnterFun(e) {
      this.$nextTick(() => {
        this.searchDocFun('0');
      })
    },
    // 检索
    searchDocFun(type) {
      // this.businessTypes=null;

      let params = {};
      params = this.getQueryParams();//查询条件
      if (type === '0') {
        this.isSearchResult = false;
        this.ipagination.current = 1;
        //启用用过滤
        this.defColumns[2].filters = this.filterOptions;
      } else if (type === '1') {
        this.isSearchResult = true;
        this.ipagination.current = 1;
        //禁用过滤
        this.defColumns[2].filters = [];
      }

      this.loading = true;

      if (this.content !== "" && this.content != null) {
        let replaceTitle = this.content
        if (replaceTitle)
          replaceTitle = replaceTitle.replace(/，/g, ',');
        // replaceTitle = replaceTitle.replace(/\[/g, '%5B');
        // replaceTitle = replaceTitle.replace(/\]/g, '%5D');
        if (this.boolCheckChange) {
          params["content"] = replaceTitle;
        } else {
          delete params["content"];
        }
        params["title"] = replaceTitle;
        params["keywords"] = replaceTitle;
      }
      params["advSearchFlag"] = 0;
      if (this.checkedValues !== "" && this.checkedValues != null) {
        params['category'] = this.checkedValues;
      }
      if (this.topicCodes != null) {
        params['topicCodes'] = this.topicCodes;
      }
      if (this.businessTypes != null) {
        params['businessTypes'] = this.businessTypes;
      }

      // 判断参数是否为空
      if (this.empty(params)) {
        if (this.isSearchResult) {
          params.withinSearchFlag = '1';
        }
        params.field = this.getQueryField();
        params.pageNo = this.ipagination.current;
        params.pageSize = this.ipagination.pageSize;
        this.loading = true;
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            this.dataSource = res.result.kmSearchResultVOPage.records;
            this.itemList = res.result.paramPath;
            if (res.result.kmSearchResultVOPage.total) {
              this.ipagination.total = res.result.kmSearchResultVOPage.total;
            } else {
              this.ipagination.total = 0;
            }
          } else {
            this.$message.error("检索失败");
          }
          this.loading = false;
        })
      } else {
        this.loading = false;
        this.$message.info("请输入搜索条件");
      }
    },

    loadDefaultBusinessTypeFunc() {
      getAction(this.url.defaultBusinessTypeList).then(res => {
        if (res.success) {
          this.defaultBusinessTypeList = res.result;
        } else {
          this.$message.error("业务加载失败");
        }
      })
    },

    //  判断对象是否为空
    empty(obj) {
      for (let key in obj) {
        return true;
      }
      return false;
    },

    //批量下载
    downloadKmDocBatch() {
      console.log("批量下载")
      if (!this.url.downloadKmDoc) {
        this.$message.error("请设置url.downloadKmDoc属性!")
        return
      }
      if (this.selectionRows.length <= 0) {
        this.$message.warning('请选择一条记录！');
        return;
      } else {
        var that = this;
        this.$confirm({
          title: "确认下载",
          content: "是否下载选中数据?",
          onOk: function () {
            for (var i = 0; i < that.selectionRows.length; i++) {
              let fileName = i;
              downloadFileName(that.url.downloadKmDoc, { docId: that.selectionRows[i].id })
            }
            that.onClearSelected();
          }
        });
      }
    },
    //加收藏夹
    addFavouriteKmDoc(record) {
      let httpurl = '';
      let method = '';
      httpurl += this.url.addFavouriteKmDoc;
      method = 'post';
      httpPostAction(httpurl, { docId: record.id }, method).then((res) => {
        if (res.success) {
          this.$message.success("收藏成功!");
          //this.loadData();
          record.favourite = 1;
        } else {
          this.$message.warning("收藏失败!");
        }
      }).finally(() => {
      })
    },
    //取消收藏夹
    delFavouriteKmDoc(record) {
      let httpurl = '';
      let method = '';
      httpurl += this.url.delFavouriteKmDoc;
      method = 'delete';
      httpPostAction(httpurl, { docId: record.id }, method).then((res) => {
        if (res.success) {
          this.$message.success("取消收藏成功!");
          // this.loadData();
          record.favourite = 0;
        } else {
          this.$message.warning("取消收藏失败!");
        }
      }).finally(() => {
      })
    },

    // 显示预览窗口，初始化
    previewKmDoc(record) {
      // this.PDFurl = window._CONFIG['domianURL'] + this.url.previewKmDoc + "?docId=" + record.id;
      this.PDFurl = this.url.previewKmDoc + "?docId=" + record.id;
      this.visible = true;
      this.pdfLoading = true;
      this.pdfShow = true;
    },
    //关闭预览窗口
    handleCancel() {
      this.visible = false;
    },

    //下载文件
    downloadKmDoc(record) {
      this.$notification.success({
        message: '文件开始下载...',
        duration: 1,
      });
      downloadFileName(this.url.downloadKmDoc, { docId: record.id })
    },

    advancedSearch() {
      this.$router.push('/advancedSearch');
    },
    // 返回
    backHomepage() {
      this.$router.push('/defaultDocSearch');
    },
    // 跳转到收藏夹
    jumpKmDocFavouritePage() {
      this.$router.push('/km/filemanagement/KmDocFavouriteList');
    },
    // 跳转到个人草稿文件夹
    jumpDraftsPage() {
      this.$router.push('/km/filemanagement/DraftsList');
    },
    historyBack() {
      history.back()
    },
    // 点击个人登录，跳转页面
    login() {
      this.$router.push('/dashboard/analysis');
    },

  }
}
</script>

<style scoped>
@import '~@assets/less/common.less';
</style>